<template>
  <el-container class="page-select">
    <el-main class="select-main sa-p-0">
      <el-container>
        <el-aside>
          <div class="left">
            <div
              class="group"
              :class="tabsScroll.currentIndex == i ? 'is-active' : ''"
              v-for="(g, i) in tabsScroll.data"
              :key="g"
              @click.stop="changeCurrentIndex(i)"
            >
              <div class="name">{{ g.group }}</div>
            </div>
          </div>
        </el-aside>
        <el-main class="right" ref="rightScrollRef" @scroll="rightScroll">
          <div
            class="group right-group"
            :ref="(el) => setRightRef(el, g, i)"
            v-for="(g, i) in tabsScroll.data"
            :key="g"
          >
            <div class="name">{{ g.group }}</div>
            <div class="link sa-flex sa-flex-wrap">
              <template v-for="l in g.children" :key="l">
                <el-popover popper-class="sa-popper" trigger="hover" :content="l.path">
                  <template #reference>
                    <div
                      class="item"
                      :class="tabsScroll.selected.id == l.id ? 'item-active' : ''"
                      @click="selectLink(l)"
                    >
                      {{ l.name }}
                    </div>
                  </template>
                </el-popover>
              </template>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-main>

    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'PageSelect',
  };
</script>

<script setup>
  import { getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue';
  import { api } from '../data.service';
  import { api as configApi } from '@/app/shop/admin/config/config.service.js';
  import { useModal } from '@/sheep/hooks';
  import TemplateSelect from '@/app/shop/admin/decorate/template/select.vue';
  import GoodsSelect from '@/app/shop/admin/goods/goods/select.vue';
  import CouponSelect from '@/app/shop/admin/coupon/select.vue';
  import CategorySelect from '@/app/shop/admin/category/select.vue';
  import ActivitySelect from '@/app/shop/admin/activity/activity/select.vue';
  import RichtextSelect from '@/app/shop/admin/data/richtext/select.vue';
  import ScoreShopSelect from '@/app/shop/admin/app/scoreShop/select.vue';

  const emit = defineEmits(['modalCallBack']);

  const { proxy } = getCurrentInstance();

  const rightRef = {};
  function setRightRef(el, item, index) {
    rightRef[item.group + index] = el;
  }

  const tabsScroll = reactive({
    data: [],
    height: [],
    currentIndex: 0,
    selected: {},
  });

  async function getPageSelect() {
    const { data } = await api.page.select();
    tabsScroll.data = data;
    nextTick(() => {
      getHeight();
    });
  }

  function rightScroll() {
    let index = tabsScroll.height.findIndex((item, index) => {
      return item > proxy.$refs.rightScrollRef.$el.scrollTop;
    });
    if (index > 0) {
      tabsScroll.currentIndex = index - 1;
    } else if (index == -1) {
      tabsScroll.currentIndex = tabsScroll.height.length - 1;
    }
  }

  function changeCurrentIndex(index) {
    proxy.$refs.rightScrollRef.$el.scrollTop = tabsScroll.height[index];
    tabsScroll.currentIndex = index;
  }

  function selectLink(link) {
    tabsScroll.selected = { ...link };

    if (link.path == '/pages/index/page') {
      // 自定义页面 id
      useModal(
        TemplateSelect,
        {
          title: '选择',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    } else if (link.path == '/pages/goods/index') {
      // 普通商品详情 id
      useModal(
        GoodsSelect,
        {
          title: '选择',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    } else if (link.path == '/pages/coupon/detail') {
      // 优惠券详情 id
      useModal(
        CouponSelect,
        {
          title: '选择',
          status: 'normal',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    } else if (link.path == '/pages/index/category') {
      // 商品分类 id
      useModal(
        CategorySelect,
        {
          title: '选择',
          from: 'page-category',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path =
              link.path +
              (res.data.list.length > 0 ? '?id=' + res.data.list[0]?.id.toString() : '');
          },
        },
      );
    } else if (link.path == '/pages/goods/list') {
      // 商品列表 categoryId
      useModal(
        CategorySelect,
        {
          title: '选择',
          from: 'page-goods',
		  topOptional:true
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path =
              link.path +
              (res.data.list.length > 0 ? '?categoryId=' + res.data.list[0]?.id.toString() : '');
          },
        },
      );
    } else if (
      link.path == '/pages/activity/groupon/list' ||
      link.path == '/pages/activity/seckill/list'
    ) {
      // 拼团列表/秒杀列表 id
      let activityTypeData = {
        groupon: 'groupon,groupon_ladder',
        seckill: 'seckill',
      };
      useModal(
        ActivitySelect,
        {
          title: '选择',
          type: activityTypeData[link.path.split('/')[3]],
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    } else if (link.path == '/pages/public/richtext') {
      // 富文本 id
      useModal(
        RichtextSelect,
        {
          title: '选择',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    } else if (link.path == '/pages/goods/groupon' || link.path == '/pages/goods/seckill') {
      // 拼团商品详情/秒杀商品详情 activity_id,id
      let activityTypeData = {
        groupon: 'groupon,groupon_ladder',
        seckill: 'seckill',
      };
      useModal(
        ActivitySelect,
        {
          title: '选择',
          type: activityTypeData[link.path.split('/').pop()],
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?activity_id=' + res.data.id.toString();
            useModal(
              GoodsSelect,
              {
                title: '选择',
                goods_ids: res.data.goods_ids,
              },
              {
                confirm: (res) => {
                  tabsScroll.selected.path =
                    tabsScroll.selected.path + '&id=' + res.data.id.toString();
                },
              },
            );
          },
        },
      );
    } else if (link.path == '/pages/goods/score') {
      // 积分商城详情 id
      useModal(
        ScoreShopSelect,
        {
          title: '选择',
        },
        {
          confirm: (res) => {
            tabsScroll.selected.path = link.path + '?id=' + res.data.id.toString();
          },
        },
      );
    }
  }

  const platformUrl = ref({});
  async function getPlatformUrl() {
    const { data } = await configApi.getPlatformUrl();
    platformUrl.value = data;
  }

  async function confirm() {
    tabsScroll.selected.fullPath = {
      url: `${
        platformUrl.value.url.endsWith('/')
          ? platformUrl.value.url.substr(0, platformUrl.value.url.length - 1)
          : platformUrl.value.url
      }${tabsScroll.selected.path}`,
      appid: platformUrl.value.appid,
      pagepath: tabsScroll.selected.path
        ? '/pages/index/index?page=' + encodeURIComponent(tabsScroll.selected.path)
        : '/pages/index/index',
    };
    emit('modalCallBack', { event: 'confirm', data: tabsScroll.selected });
  }

  function getHeight() {
    tabsScroll.height = [];
    for (let e in rightRef) {
      tabsScroll.height.push(rightRef[e].offsetTop);
    }
  }

  onMounted(() => {
    getPageSelect();
    getPlatformUrl();
  });
</script>
<style lang="scss" scoped>
  .page-select {
    .select-main {
      display: flex;
    }
    .el-aside {
      --el-aside-width: 140px;
      border-right: 1px solid var(--sa-border);
      padding: 20px;
    }
    .el-main {
      --el-main-padding: 28px 20px 20px;
    }
    .group {
      .name {
        margin: 0 0 12px 12px;
      }
      .link {
        margin-bottom: 12px;
        .item {
          padding: 0 16px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid var(--sa-border);
          border-radius: 4px;
          margin: 0 12px 12px 0;
          font-size: 14px;
          font-weight: 400;
          color: var(--sa-font);
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
            background: var(--t-bg-hover);
          }
          &.item-active {
            color: var(--el-color-primary);
            background: var(--t-bg-active);
          }
        }
      }
    }
    .left {
      .group {
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        color: var(--sa-subtitle);
        margin-bottom: 4px;
        cursor: pointer;
        &:hover {
          color: var(--el-color-primary);
          background: var(--t-bg-hover);
        }
        &.is-active {
          color: var(--el-color-primary);
          background: var(--t-bg-active);
        }
      }
    }
    .right {
      .name {
        line-height: 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--sa-subtitle);
        margin: 0 0 12px 0;
      }
    }
    .right-group {
      .link {
        border-bottom: 1px dashed var(--sa-border);
      }
    }
  }
</style>
